<template>
  <div id="app">
    <h3>App</h3>
    <h3 v-if="isLoading">正在拼命加载中……</h3>
    <h3 v-else-if="isError">产生异常，请稍后再试……</h3>
    <template v-else>
      <div v-for="item in items" :key="item.id">
        <p>{{item.full_name}}</p>
      </div>
    </template>
    <!--<hr>-->
    <!--<div v-for="item in items" :key="item.id">-->
    <!--  <p>{{item.full_name}}</p>-->
    <!--</div>-->
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data(){
    return {
      items:[],
      isLoading:true,
      isError:false,// 是否有异常
    }
  },
  async mounted() {
    // 1
    // axios.get("https://api.github.com/search/repositories",{
    //     // ?q=r&sort=stars
    //     params:{
    //         q:"r",
    //         sort:"stars"
    //     }
    // }).then(response=>{
    //     console.log(response.data);
    // })

    // 2
    // axios.get("https://api.github.com/search/repositories",{
    //     // ?q=r&sort=stars
    //     params:{
    //         q:"r",
    //         sort:"stars"
    //     }
    // }).then(({data})=>{
    //     console.log(data);
    // })

    // 3
    // const {data} = await axios.get("https://api.github.com/search/repositories", {
    //   params: {
    //     q: "r",
    //     sort: "stars"
    //   }
    // });
    // console.log(data);
    // this.items = data.items;
    try{
      const {data} = await  axios.get("https://api.github.com/search/repositories",{
        params: {
          q: "r",
          sort: "stars"
        }
      });
      this.items = data.items;
      this.isLoading = false;
    }catch (err){
      this.isLoading = false;
      this.isError= true;
    }
  }
}
</script>

<style lang="less">

</style>


